import { useCreateLoadMessage, useFolderPath } from './hooks';
import { EVENT_NAME, FUZZY_COMMAND_NAME } from '../common/constants';
import { VSCodeButton, VSCodeTextArea, VSCodeTextField } from '@vscode/webview-ui-toolkit/react';
import { FormEvent, useState } from 'react';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const global = globalThis as any;

export const CreateTab = () => {
  const uri = useFolderPath()
  const { data: loadMessage, setData: setLoadMessage, ifError: ifErrorMessage } = useCreateLoadMessage();
  const [description, setDescription] = useState<string>('');

  const handleSelectPath = () => {
    global.vscode.postMessage({
      type: FUZZY_COMMAND_NAME.getFolder
    })
  };

  const handleChangeText = (
    e : Event | FormEvent<HTMLElement>
  )=>{
    const event = e as unknown as React.ChangeEvent<HTMLInputElement>
    const {value} = event.target
    setDescription(value)
  }

  const handleCreateClicked = () => {
    setLoadMessage('Waiting ...\n')
    global.vscode.postMessage({
        type: EVENT_NAME.fuzzyCreateProject,
        data: {
          path: uri,
          description: description
        }
    })
  }

  return (
    <>
      <h3 style={{ marginBottom: '10px', textAlign:'left'}}>1.Select one path</h3>
      <VSCodeTextField
        placeholder='Selected path will appear here'
        value={uri}
        onChange={handleChangeText}
        readOnly={true}
        style={{ width: '100%', marginBottom: '20px', borderRadius: '4px' }}
      >

      </VSCodeTextField>

      <VSCodeButton onClick={handleSelectPath} style={{marginBottom: '20px'}}>
        select
      </VSCodeButton>

      <h3 style={{ marginBottom: '10px', textAlign:'left'}}>
        2.Input your description here.
      </h3>
      <VSCodeTextArea
        placeholder='describe your target'
        rows={10}
        value={description}
        onChange={handleChangeText}
        resize={'both'}

        style={{ width: '100%', height: '200px', marginBottom: '20px', borderRadius: '4px' }}
      />

      <h3 style={{ marginBottom: '10px', textAlign:'left'}}>
        3.Click to create a Project
      </h3>
      <VSCodeButton onClick={handleCreateClicked} style={{marginBottom: '20px'}}>
        Create!
      </VSCodeButton>

      <h3 style={{ marginBottom: '10px', textAlign:'left'}}>
        4.wait for a moment.
      </h3>

      <h3 style={{ color: ifErrorMessage ? 'red' : 'green', marginBottom: '10px', textAlign:'left'}}>
        {loadMessage}
      </h3>
    </>
  );
};
